<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>完整库使用 - layui</title>
    <link rel="stylesheet" href="/html/static/ajax/libs/layui/css/layui.css">
    <style>
        body {
            padding: 10px;
        }
    </style>
</head>

<body>

    <textarea style="
  position: fixed; 
  top: 0; 
  bottom: 0; 
  right:0; 
  width: 100px; 
  background-color:#666; 
  z-index:100; 
resize: none;">

</textarea>


    <div id="demo1"></div>

    <div class="layui-btn-container">
        <button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
        <button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
    </div>
    <div class="layui-inline">
        <input class="layui-input" id="date1" placeholder="日期">
    </div>

    <div class="layui-tab" lay-filter="tabDemo">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">标题1</li>
            <li lay-id="2">标题2</li>
            <li lay-id="3">标题3</li>
            <li lay-id="4">标题4</li>
            <li lay-id="5">标题5</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form">
                    <select name="city" lay-verify="">
                        <option value="">请选择一个城市</option>
                        <option value="010">北京</option>
                        <option value="021">上海</option>
                        <option value="0571">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-tab-item">
                <div id="test2" class="demo-transfer"></div>
            </div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
        </div>
    </div>


    <!-- <script src="../dist/layui.js"></script> -->
    <script src="/html/static/ajax/libs/layui/layui.js"></script>
    <script>
        console.log(layui.$);

        //(function(){
        layui.use(function () {
            var $ = layui.jquery
                , layer = layui.layer
                , form = layui.form
                , laypage = layui.laypage
                , element = layui.element
                , transfer = layui.transfer
                , util = layui.util
                , laydate = layui.laydate;

            layer.msg('hello layui');
            //layer.closeAll();

            //自动测试
            (function (run) {
                if (!run) return;

                var timer = setInterval(function () {
                    location.reload();
                }, 1000);

                $.ajax({
                    url: './all.html'
                    , beforeSend: function () {
                        layer.load();
                    }
                    , success: function () {
                        layer.closeAll('loading', function () {
                            setTimeout(function () {
                                if ($('.layui-layer-loading').length) {
                                    console.error('layer close 异常');
                                    clearInterval(timer);
                                }
                            }, 200);
                        });
                    }
                });
            })(0);

            laypage.render({
                elem: 'demo1'
                , count: 100 //总页数
            });

            console.log(lay('#footer').html());

            laydate.render({
                elem: '#date1'
            })

            //测试加载非内置模块
            /*
            layui.config({
              base: 'extends/'
            }).extend({
              mod1: 'mod1'
              ,mod2: 'mod2'
            }).use('mod1');
            */


            //定义标题及数据源
            transfer.render({
                elem: '#test2'
                , title: ['候选文人', '获奖文人']  //自定义标题
                , data: [
                    { "value": "1", "title": "李白" }
                    , { "value": "2", "title": "杜甫" }
                    , { "value": "3", "title": "苏轼" }
                    , { "value": "4", "title": "李清照" }
                    , { "value": "5", "title": "鲁迅", "disabled": true }
                    , { "value": "6", "title": "巴金" }
                    , { "value": "7", "title": "冰心" }
                    , { "value": "8", "title": "矛盾" }
                    , { "value": "9", "title": "贤心" }
                ]
                //,width: 150 //定义宽度
                , height: 210 //定义高度
            });

            //触发事件
            util.event('test-active', {
                'test-form': function () {
                    layer.open({
                        type: 1
                        , resize: false
                        , content: ['<ul class="layui-form" style="margin: 10px;">'
                            , '<li class="layui-form-item">'
                            , '<label class="layui-form-label">输入框</label>'
                            , '<div class="layui-input-block">'
                            , '<input class="layui-input" name="field1">'
                            , '</div>'
                            , '</li>'
                            , '<li class="layui-form-item">'
                            , '<label class="layui-form-label">选择框</label>'
                            , '<div class="layui-input-block">'
                            , '<select name="field2">'
                            , '<option value="A">A</option>'
                            , '<option value="B">B</option>'
                            , '<select>'
                            , '</div>'
                            , '</li>'
                            , '<li class="layui-form-item" style="text-align:center;">'
                            , '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                            , '</li>'
                            , '</ul>'].join('')
                        , success: function (layero) {
                            layero.find('.layui-layer-content').css('overflow', 'visible');

                            form.render().on('submit(*)', function (data) {
                                layer.msg(JSON.stringify(data.field));
                            });
                        }
                    });
                }
                , 'test-use': function (othis) {
                    layui.use(['laytpl', 'laypage', 'laydate', 'jquery', 'layer', 'util', 'element', 'upload', 'slider', 'colorpicker', 'form', 'tree', 'transfer', 'table', 'carousel', 'rate', 'flow', 'code'], function () {
                        layer.tips('请观察 Network 是否有重复加载 js 文件。如果没有任何新的请求，则代表正常。', othis, {
                            time: 10 * 1000
                        });
                    });
                }
            });

        });
        //})();
    </script>



    <span class="layui-breadcrumb" lay-separator="-">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>

    <div id="footer">© footer</div>

</body>

</html>